<template>
  <div class="box">
<div>
<div><h1>用户管理系统</h1>
</div>
<div class="top">
  <input type="text" class="txt" v-model="keyWord" placeholder="请输入关键字.....">
  <button type="button"  class="seekBut" @click="seekBut">查找</button>
  <button type="button" class="addBut" @click="addBut">新增</button>
  <table>
    <thead>
  <tr>
 <td>id</td>
 <td>用户姓名</td>
 <td>年龄</td>
 <td>操作</td>
  </tr>
</thead>
<tbody>
  <tr v-for="item in list">
    <th>{{item.id}}</th>
    <th>{{item.userName}}</th>
    <th>{{item.userAge}}</th>
    <th><button type="button" class="btn updColer">编辑</button>
      <button type="button" class="btn delColer" @click="btlBut(item.id)">删除</button></th>
  </tr>
</tbody>
  </table>

</div>
</div>    
  </div>
</template>
<script setup>
import axios from "axios";
import {ref} from "vue"
let list=ref([])
let keyWord=ref("")
axios.get("http://localhost:5000/user").then((ctx)=>{
  let data=ctx.data.data
  // console.log(data);
  list.value=data
})


// 删除
let btlBut=function (id) {  
    if (confirm("是否删除？？？")) {
      axios.delete(`http://localhost:5000/user/${id}`).then(
        (res)=>{
    let data=  list.value.findIndex(item=>item.id===id)
    list.value.splice(data,1)
  
        }
      )
    }
}
// 查找
let seekBut=function () {
  console.log(keyWord.value);
let res=  axios.get(`http://localhost:5000/user?keyWord=${keyWord.value}`)

  console.log(res);
  
}

</script>
<style>

table{
border: 1px black solid;
}
.top{
  margin-top: 10px;
}
.btn{
  border-radius: 5px;
  margin-left: 5px;
 color: white;
  }
  .delColer{
background-color: brown;    
  }
  .updColer{
background-color: blue;    
  }
  .seekBut{
    margin-left: 4px;
  }
  .addBut{
    margin-left: 4px;
  }

/* 设置斑马纹 */
tr:nth-child(even) { /* 偶数行 */
  background-color: #ada4a4;
}

</style>